<template>
  <el-container>
    <div class="animated-background">
      <div class="background-image"></div>
      <div class="light x1"></div>
      <div class="light x2"></div>
      <div class="light x3"></div>
      <div class="light x4"></div>
      <div class="light x5"></div>
      <div class="light x6"></div>
      <div class="light x7"></div>
      <div class="light x8"></div>
    </div>
    <el-header>
      <nav>
        <router-link to="/">首页</router-link> |
        <router-link to="/about">关于</router-link> |
        <router-link to="/articles">文章</router-link> 
        <div class="user-info" v-if="isAuthenticated">
          <el-avatar 
            :size="32" 
            :src="avatarUrl" 
            @error="handleAvatarError"
            @click="showAvatarPreview"
            class="clickable-avatar"
          >
            {{ username.charAt(0).toUpperCase() }}
          </el-avatar>
          <span>欢迎, {{ username }}</span>
          <router-link to="/profile" class="profile-link">个人资料</router-link> 
          <el-button type="text" @click="handleLogout">退出</el-button>
        </div>
        <div class="user-info" v-else>
          <router-link to="/login">登录</router-link> |
          <router-link to="/register">注册</router-link>
        </div>
      </nav>
    </el-header>
    
    <el-main>
      <router-view></router-view>
    </el-main>
    
    <el-footer>
      © 2024 Portal Website
    </el-footer>

    <!-- 头像预览对话框 -->
    <el-dialog
      v-model="avatarPreviewVisible"
      width="400px"
      :show-close="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      class="avatar-preview-dialog"
    >
      <div class="avatar-preview-container">
        <img 
          v-if="avatarUrl" 
          :src="avatarUrl" 
          class="avatar-preview-image"
          @error="handleAvatarError"
        />
        <el-avatar 
          v-else 
          :size="200" 
          class="avatar-preview-fallback"
        >
          {{ username.charAt(0).toUpperCase() }}
        </el-avatar>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

// 图片压缩函数
const compressImage = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (e) => {
      const img = new Image()
      img.src = e.target.result
      img.onload = () => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        
        // 计算压缩后的尺寸
        let width = img.width
        let height = img.height
        const maxSize = 800 // 最大尺寸
        
        if (width > height && width > maxSize) {
          height = Math.round((height * maxSize) / width)
          width = maxSize
        } else if (height > maxSize) {
          width = Math.round((width * maxSize) / height)
          height = maxSize
        }
        
        canvas.width = width
        canvas.height = height
        
        // 绘制图片
        ctx.drawImage(img, 0, 0, width, height)
        
        // 转换为Blob
        canvas.toBlob((blob) => {
          resolve(new File([blob], file.name, {
            type: 'image/jpeg',
            lastModified: Date.now()
          }))
        }, 'image/jpeg', 0.8) // 压缩质量为0.8
      }
    }
  })
}

export default {
  name: 'App',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const isAuthenticated = ref(false)
    const username = ref('')
    const avatarUrl = ref('')
    const avatarPreviewVisible = ref(false)

    const checkAuth = () => {
      const token = localStorage.getItem('token')
      const user = JSON.parse(localStorage.getItem('user') || '{}')
      isAuthenticated.value = !!token
      username.value = user.username || ''
      if (user.avatar) {
        avatarUrl.value = user.avatar;
      } else {
        avatarUrl.value = '';
      }
    }

    const handleAvatarError = () => {
      avatarUrl.value = ''
    }

    const showAvatarPreview = () => {
      avatarPreviewVisible.value = true
    }

    const handleLogout = () => {
      localStorage.removeItem('token')
      localStorage.removeItem('user')
      isAuthenticated.value = false
      username.value = ''
      avatarUrl.value = ''
      ElMessage.success('已退出登录')
      router.push('/login')
    }

    onMounted(() => {
      checkAuth()
    })

    watch(() => route.path, () => {
        checkAuth();
    });

    return {
      isAuthenticated,
      username,
      avatarUrl,
      avatarPreviewVisible,
      handleLogout,
      handleAvatarError,
      showAvatarPreview
    }
  }
}
</script>

<style>
:root {
  --macos-bg: rgba(255, 255, 255, 0.8);
  --macos-header: rgba(255, 255, 255, 0.7);
  --macos-text: #333333;
  --macos-accent: #007AFF;
  --macos-hover: #0056b3;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f5f5f7;
  overflow-x: hidden;
}

.el-container {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* 动画背景 */
.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(45deg, rgba(245, 245, 247, 0.9) 0%, rgba(232, 232, 232, 0.9) 100%);
  pointer-events: none;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://img.zcool.cn/community/01a9a35d54c4eda801211d53f65fef.jpg@1280w_1l_2o_100sh.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  filter: blur(5px);
  transform: scale(1.1);
}

.light {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  animation: float 15s infinite;
  opacity: 0.2;
  filter: blur(30px);
  mix-blend-mode: screen;
}

.x1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 20s;
}

.x2 {
  top: 70%;
  left: 80%;
  animation-delay: -2s;
  animation-duration: 18s;
}

.x3 {
  top: 30%;
  left: 30%;
  animation-delay: -4s;
  animation-duration: 22s;
}

.x4 {
  top: 80%;
  left: 20%;
  animation-delay: -6s;
  animation-duration: 19s;
}

.x5 {
  top: 20%;
  left: 70%;
  animation-delay: -8s;
  animation-duration: 21s;
}

.x6 {
  top: 50%;
  left: 10%;
  animation-delay: -10s;
  animation-duration: 23s;
}

.x7 {
  top: 60%;
  left: 60%;
  animation-delay: -12s;
  animation-duration: 17s;
}

.x8 {
  top: 40%;
  left: 50%;
  animation-delay: -14s;
  animation-duration: 20s;
}

@keyframes float {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(50px, -50px) scale(1.1) rotate(5deg);
  }
  50% {
    transform: translate(-30px, 30px) scale(0.9) rotate(-5deg);
  }
  75% {
    transform: translate(30px, 40px) scale(1.05) rotate(3deg);
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

.el-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--macos-text);
  line-height: 60px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-footer {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--macos-text);
  text-align: center;
  line-height: 60px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.el-main {
  padding: 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - 120px);
  border-radius: 10px;
  margin: 20px;
}

nav {
  padding: 0 20px;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

nav a {
  color: var(--macos-text);
  text-decoration: none;
  margin-right: 20px;
  font-size: 14px;
  transition: color 0.3s ease;
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--macos-accent);
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

nav a.router-link-exact-active {
  color: var(--macos-accent);
}

nav a.router-link-exact-active::after {
  width: 100%;
}

.user-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-info .el-avatar {
  background-color: var(--macos-accent);
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-info .el-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.user-info span {
  color: var(--macos-text);
  font-size: 14px;
}

.el-button--text {
  color: var(--macos-accent);
  font-size: 14px;
  padding: 0;
  height: auto;
  line-height: 1;
}

.el-button--text:hover {
  color: var(--macos-hover);
}

.profile-link {
  color: var(--macos-text) !important;
  text-decoration: none !important;
  margin-left: 10px;
  margin-right: 5px;
  font-size: 14px;
}

.profile-link:hover {
  color: var(--macos-accent) !important;
}

/* 添加响应式设计 */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    padding: 10px;
  }
  
  .user-info {
    margin: 10px 0 0 0;
    width: 100%;
    justify-content: center;
  }
}

.clickable-avatar {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.clickable-avatar:hover {
  transform: scale(1.1);
}

.avatar-preview-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.avatar-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #f5f5f7;
}

.avatar-preview-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar-preview-fallback {
  font-size: 80px;
  background-color: var(--macos-accent);
  color: white;
}
</style> 